<template>
  <div class="home">
    <!--1.  顶部区域布局---------- -->
    <div class="home-header">
      <div class="item">
        <div class="header-title">{{ $t('home.TotalSales') }}</div>
        <div class='num'>{{totalDate.saleTotal | num}}</div>
        <div class="bottom">今日销售额：{{totalDate.sale | num}}</div>
      </div>
      <div class="item">
        <div class="header-title">总访问量</div>
        <div class='num'>{{totalDate.viewsTotal | num}}</div>
        <div class="bottom">今日访问量{{totalDate.views | num}}</div>
      </div>
      <div class="item">
        <div class="header-title">总收藏量</div>
        <div class='num'>{{totalDate.collectTotal | num}}</div>
        <div class="bottom">今日销售额：{{totalDate.collect | num}}</div>
      </div>
      <div class="item">
        <div class="header-title">总支付量</div>
        <div class='num'>{{totalDate.payTotal | num}}</div>
        <div class="bottom">今日支付量：{{totalDate.pay | num}}</div>
      </div>
    </div>

    <!--2. 访问数据统计 ----------------->
    <div class="home-content">
      <div
        class="time-info"
        id='box13'
      >
        <div class="title">月销售额</div>
        <div
          id="charts"
          style="width: 100%; height: 300px"
        ></div>
      </div>
      <div
        class="area"
        id="box1"
      >
        <div class="title">比例分配</div>
        <div
          id="pie"
          style="width: 100%; height: 300px"
        ></div>
      </div>
    </div>

    <!-- 3.  -->
    <!-- 最新内容 -->
    <div class="home-footer">
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <span>今日订单</span>
        </div>
        <div class="text item">
          <el-row>
            <el-col :span="8">
              <div class="title">今日订单数</div>
              <div>{{ orderDate.curOrderCount }}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">汇总确认订单</div>
              <div>{{ orderDate.curCollect }}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">今日金额</div>
              <div>{{ orderDate.curMoney }}</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <span>本月订单</span>
        </div>
        <div class="text item">
          <el-row>
            <el-col :span="8">
              <div class="title">本月订单数</div>
              <div>{{orderDate.orderCount}} </div>
            </el-col>
            <el-col :span="8">
              <div class="title">汇总确认订单</div>
              <div>{{orderDate.collect}}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">累计金额</div>
              <div>{{orderDate.money}}</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <span>快捷入口</span>
        </div>
        <div class="text item">
          <el-button type="primary">产品管理</el-button>
          <el-button>消息管理</el-button>
          <el-button>内容管理</el-button>
        </div>
      </el-card>
    </div>

  </div>
</template>
  
  <script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      totalDate: {},
      orderDate: {}
    }
  },
  created() {
    this.totalInfo(),
      this.orderinfo()
  },
  mounted() {
    // console.log('id', document.getElementById('charts'));
    // this.line();
    this.pie();
    this.format()
  },
  methods: {
    //首页统计数据
    async totalInfo() {
      let res = await this.$api.totalInfo()
      console.log('首页统计数据', res.data.data.list);
      this.totalDate = res.data.data.list
    },
    async orderinfo() {//首页订单数据
      let res = await this.$api.orderinfo()
      console.log('首页订单数据', res.data.list);
      this.orderDate = res.data.list
    },
    async format() {//首页折线树状图数据
      let res = await this.$api.format()
      console.log('首页折线树状图数据', res.data);
      // console.log(res.data.result.data.sale_money)//[{},{}....]
      //折线树状图格式[]
      let arr = res.data.result.data.sale_money;
      let arrx = [], echartsMoney = [], echartsSaleAmount = [], pieData = []
      arr.forEach(ele => {
        arrx.push(ele.name);
        echartsMoney.push(ele.num);
        echartsSaleAmount.push(ele.total_amount);
        let pieDataObj = {};
        pieDataObj.name = ele.name;
        pieDataObj.value = ele.total_amount
        pieData.push(pieDataObj)
      });
      // console.log(arrxx);
      // console.log(echartsMoney);
      // console.log(echartsSaleAmount);
      this.line(arrx, echartsMoney, echartsSaleAmount)
      this.pie(pieData)
    },

    line(arrx, echartsMoney, echartsSaleAmount) {//首页折线图
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('charts'));
      // 绘制图表
      myChart.setOption({
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {},
        toolbox: {
          feature: {
            // dataZoom: {
            //   yAxisIndex: 'none'
            // },
            // restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          data: arrx,
          axisTick: {
            alignWithLabel: true,
          }

        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: echartsMoney,
            smooth: true,
            label: { show: true }
          },
          {
            name: '销量额',
            type: 'line',
            data: echartsSaleAmount,
            labelLine: {},
            lineStyle: {
              type: "solid"
            },
            smooth: true,
            label: { show: true }
          },


        ]
      });
    },
    pie(pieData) {//首页饼图
      var chartDom = document.getElementById('pie');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'item',
          formatter:'{b}: {d}%'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'left'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: pieData,
          }
        ]
      };
      option && myChart.setOption(option);
    },
  },
  filters: {//过滤器
    num(value) {//1234----1,234
      if (!value) return;
      return value.toLocaleString()
    }
  }
}
  </script>
  
<style lang="less" scoped>
.home-header {
  display: flex;
  padding-right: 30px;
  .item {
    flex: 1;
    height: 100px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    margin-left: 20px;
    margin-right: 20px;
    font-weight: bold;
    color: #fff;
    position: relative;
    .header-title{
      text-align: center;
    }
    .num {
      font-size: 22px;
      margin: 10px;
      color: #fff;
      text-align: center;
    }
    .bottom {
      position: absolute;
      border-top: 1px solid rgb(246, 245, 245);
      padding: 10px 20px;
      bottom: 0;
      right: 0;
      left: 0;
      text-align: center;
      color: #fff;
      font-weight: normal;
    }
  }
  .item:nth-child(1) {
    background-image: linear-gradient(#df887d, #88554d);
  }
  .item:nth-child(2) {
    background-image: linear-gradient(#409eff, #2e556e);
  }
  .item:nth-child(3) {
    background-image: linear-gradient(#b54fa8, #713c7a);
  }
  .item:nth-child(4) {
    background-image: linear-gradient(#1cd2f1, #39717a);
  }
}

// 图表

.home-content {
  margin: 20px;
  display: flex;
  height: 320px;
  .time-info {
    flex: 2;
    background: #fff;
    margin-right: 20px;
    padding: 10px;
  }
  .area {
    flex: 1;
    background: #fff;
    padding: 10px;
  }
}

//内容

.home-footer {
  display: flex;
  padding-left: 20px;
  margin-bottom: 20px;

  .box-card {
    flex: 1;
    margin-right: 30px;

    span {
      font-weight: 600;
    }
  }
  .item {
    text-align: center;
    font-size: 24px;
    color: #333;
    .el-col {
      border-right: 1px solid #eee;
    }
    .el-col:last-child {
      border-right: none;
    }
    .title {
      margin-bottom: 10px;
      font-size: 14px;
    }
  }
}
</style>